import { useTranslations } from 'next-intl'
import Image from 'next/image'
import { Link } from '@/src/navigation'

import clockIcon from '@/public/clock_gray_line.png'
import arrowIcon from '@/public/arrow_right_white.png'

interface ArticleProps {
  id: number
  picture: string
  title: string
  desc: string
  createdAt: string
}

const Article: React.FC<ArticleProps> = (props) => {
  const { id, picture, title, desc, createdAt } = props
  const t = useTranslations('news')
  return (
    <Link href={`/news-detail/${id}`}>
      <article className='relative flex items-center py-[1.375rem] border-b-[1px] border-b-[#EBEBEB] border-b-solid lg:py-[1.6875rem] 2xl:py-[2.53125rem] hover:bg-gray-100 transition-colors duration-200 cursor-pointer'>
        {/* 图片 */}
        <div className='flex-shrink-0 relative w-[9.3125rem] h-[5.8125rem] bg-gray-100 lg:w-[12.4375rem] lg:h-[7.75rem] 2xl:w-[18.65625rem] 2xl:h-[11.625rem]'>
          <Image
            src={picture}
            alt='picture'
            fill
            style={{ objectFit: 'cover' }}
            sizes='(max-width: 1024px) 40vw, (max-width: 1536px) 20vw, 20vw'
          />
        </div>
        <div className='flex-shrink-0 w-[0.625rem] lg:w-[0.8125rem] 2xl:w-[1.21875rem]' />
        {/* 右侧内容 */}
        <div className='flex flex-col h-[5.8125rem] lg:justify-between lg:h-[7.75rem] 2xl:h-[11.625rem]'>
          <div>
            <h2 className='line-clamp-1 font-medium text-[#333333] text-[0.875rem] leading-[1.1875rem] 2xl:text-[1.3125rem] 2xl:leading-[1.78125rem]'>
              {title}
            </h2>
            <div className='lg:h-2'></div>
            <p className='line-clamp-1 lg:line-clamp-2 font-medium text-[#666666] leading-[1.0625rem] text-[0.75rem] 2xl:text-[1.125rem] 2xl:leading-[1.59375rem]'>
              {desc}
            </p>
          </div>
          <div className='h-[0.75rem]' />
          <div className='flex items-center space-x-1 lg:mb-2 2xl:mb-3'>
            {/* 图标 */}
            <div className='relative w-[0.75rem] h-[0.75rem] space-x-1 2xl:w-[1.125rem] 2xl:h-[1.125rem] 2xl:space-x-[0.375rem]'>
              <Image
                src={clockIcon}
                alt='clock icon'
                fill
                sizes='(max-width: 1024px) 5vw, 10vw'
              />
            </div>
            {/* 时间 */}
            <div className='text-[#999999] text-[0.75rem] leading-[0.75rem] font-medium 2xl:text-[1.125rem] 2xl:leading-[1.125rem]'>
              {createdAt}
            </div>
          </div>
        </div>
        <button className='absolute bottom-[1.375rem] right-0 flex justify-center items-center px-3 py-2 bg-[#202227] hover:bg-gray-700 transition-colors duration-200 text-white text-[0.875rem] leading-[0.875rem] font-medium lg:bottom-[1.6875rem] 2xl:bottom-[2.53125rem] 2xl:px-[1.125rem] 2xl:py-3 2xl:text-[1.3125rem] 2xl:leading-[1.3125rem]'>
          {t('readMore')}
          <div className='w-1'></div>
          <div className='relative w-[0.78125rem] h-[0.46875rem] 2xl:w-[1.171875rem] 2xl:h-[0.703125rem]'>
            <Image
              src={arrowIcon}
              alt='arrow icon'
              fill
              sizes='(max-width: 1024px) 5vw'
            />
          </div>
        </button>
      </article>
    </Link>
  )
}

export default Article
